<template>
  <div class="article">
    <view class="head">
      <div class="returnBtn" @click="goBack">
        <image src="/static/images/stationInfo/icon_return@2x.png" alt="" mode="widthFix"></image>
      </div>
      <div class="article_title">站务考核</div>
    </view>

    <view class="articleList">
      <table class="article-table">
        <thead>
          <tr>
            <th style="width: calc(100vw * 300 / 2560);">序号</th>
            <th>标题</th>
            <th style="padding-left: calc(100vw * 60 / 2560);">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in articleList" :key="index">
            <td style="width: calc(100vw * 300 / 2560);">{{ String(index +
              1).padStart(2, '0') }}</td>
            <td style="width: 1550px;">{{ item.parperName }}</td>
            <td style="text-align: center;font-size: calc(100vw * 40 / 2560);">
              <div class="detailBtn" @click="lookDetail(item)">查看</div>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 分页器 -->
      <view v-if="total > 5" class="pagination">
        <view class="page_info">共 {{ total }} 条记录</view>
        <view class="page_controls">
          <button @click="prevPage" class="prev_page" :disabled="queryParams.pageNum === 1">
            上一页
          </button>
          <button @click="nextPage" class="next_page" :disabled="queryParams.pageNum === maxPage">
            下一页
          </button>
        </view>
      </view>

    </view>
  </div>
</template>

<script>
import { getArticleListByColumnId, getArticleDetailById, getPaperList } from "@/api/index"
import { baseUrl } from '../../config'
import config from '@/config.js'

export default {
  data() {
    return {
      tabId: '', // 存储选中的tab id
      columnList: [],
      columnId: '',
      total: 0,
      articleList: [],
      queryParams: {
        parperId: '',
        pageNum: 1,
        pageSize: 4,
      },
    }
  },
  onLoad(options) {
    // console.log('接收到的参数:', options);

    // 接收参数
    this.queryParams.parperId = options.parperId;

    // 获取文章列表
    if (this.queryParams.parperId) {
      this.getArticleListById();
    }
  },
  mounted() {
    this.baseUrl = config.baseUrl
  },
  computed: {
    maxPage() {
      return Math.ceil(this.total / this.queryParams.pageSize) || 1
    }
  },
  methods: {
    getArticleListById() {
      // console.log('获取文章列表参数:', this.queryParams);

      getPaperList(this.queryParams).then(res => {
        // console.log('getArticleListById', res);

        if (res.code == 200 && res.rows.length > 0) {
          this.articleList = res.rows || [];
          this.total = res.total || 0;
        } else {
          uni.showToast({
            title: '获取文章列表失败',
            icon: 'none'
          });
        }
      });
    },

    lookDetail(item) {
      console.log('准备跳转到:', item);
      const url = `/pages/assessDetail/index?id=${item.id}`;
      // console.log('准备跳转到:', url);
      uni.navigateTo({
        url: url,
        success: () => {
          console.log('跳转成功，传递的参数:', item);
        },
        fail: (err) => {
          console.error('跳转失败:', err);
        }
      });

    },


    prevPage() {
      // console.log(1);

      if (this.queryParams.pageNum > 1) {
        this.$nextTick(() => {
          this.queryParams.pageNum--
          this.getArticleListById()
        })
      }
    },
    nextPage() {
      // console.log(2);

      if (this.queryParams.pageNum < this.maxPage) {
        this.$nextTick(() => {
          this.queryParams.pageNum++
          this.getArticleListById()
        })
      }
    },

    goBack() {
      // 获取当前页面栈
      uni.navigateBack({
        delta: 1,
        fail: (err) => {
          console.error('返回失败:', err);
          // 如果返回失败，跳转到首页
          uni.switchTab({
            url: '/pages/index'
          });
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/ .custom-tab-bar-wrapper {
  display: none !important;
}

.article {
  width: 100vw;
  height: 100vh;
  background-color: #00063A;

  .head {
    width: 100vw;
    height: calc(100vw * 140 / 2560); // 高度按比例自适应
    background: url('@/static/images/index/bg_top2.png') no-repeat center center;
    background-size: cover;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 calc(100vw * 20 / 2560);

    .returnBtn {
      width: calc(100vw * 64 / 2560);
      height: calc(100vw * 64 / 2560);
      margin-right: calc(100vw * 30 / 2560);

      image {
        width: 100%;
        height: 100%;
      }
    }

    .article_title {
      font-size: calc(100vw * 40 / 2560);
      color: #FFFFFF;
      text-align: left;
    }
  }

  .articleList {
    width: calc(100vw * 2500 / 2560);
    height: calc(100vw * 1220 / 2560);
    margin: calc(100vw * 40 / 2560) calc(100vw * 30 / 2560);
    background: url('@/static/images/stationInfo/bg_articleList@2x.png');
    border-radius: calc(100vw * 24 / 2560);
    padding: calc(100vw * 80 / 2560) calc(100vw * 260 / 2560);
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;

    .article-table {
      width: 100%;
      border-collapse: collapse;
      color: #fff;

      th {
        font-size: calc(100vw * 40 / 2560);
        color: #8E95B8;
        text-align: left;
      }

      td {
        font-size: calc(100vw * 48 / 2560);
        height: calc(100vw * 168 / 2560);

        .detailBtn {
          width: calc(100vw * 200 / 2560);
          height: calc(100vw * 80 / 2560);
          line-height: calc(100vw * 80 / 2560);
          background: linear-gradient(#3670FF 0%, #1022D5 100%);
          box-shadow: inset 0px 0px 4px 1px #1C0007;
          border-radius: calc(100vw * 99 / 2560);
        }
      }

      th,
      td {
        border: none;
        border-bottom: 1px solid #354480;
        // padding: calc(100vw *52 / 2560) calc(100vw * 8 / 2560);
        box-sizing: border-box;
        text-align: left;
      }

      // tr:last-child td {
      //   border-bottom: none;
      // }

      tr:nth-child(even) {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(51, 105, 251, 0.2) 49%, rgba(255, 255, 255, 0) 100%);
      }
    }

    .pagination {
      width: 100%;
      margin-top: calc(100vw * 80 / 2560);
      display: flex;
      align-items: center;

      .page_info {
        font-size: calc(100vw * 26 / 2560);
        color: #8E95B8;
      }

      .page_controls {
        margin-left: calc(100vw * 40 / 2560);
        display: flex;
        align-items: center;

        .prev_page {
          margin-right: calc(100vw * 20 / 2560);
        }
      }
    }
  }
}
</style>